<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">		
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>购物车</title>		
		<link rel="stylesheet" href="../libs/mui/mui.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
	</head>	
	<style>		
		.mui-bar-tab~.mui-content {padding-bottom: 95px;}
		.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {color: #338efc;}
		.mui-checkbox input[type=checkbox]:before{font-size: 24px;}		
		.mui-checkbox input[type=checkbox]{top: 15px; left: 0px !important;}
		.mui-checkbox.mui-left{display: inline-block;}
		.wid1{width: 13%;}
		.wid2{width: 87%;}
		.edit-text,.delete{display: none;}
		.mui-numbox{width: 145px;}	
		.delete button{padding: 13px 29px 12px!important;}	
		.jiesuan{line-height: 50px;}
		.all-chose {height: 50px;}
		/*全选*/
		.all-chose.mui-checkbox input[type=checkbox]{top: 11px; left: 0px !important;}
		.all-chose.mui-checkbox.mui-left label{font-size: 14px; padding: 0 30px;width:auto !important;height: 50px;line-height: 48px;}
		.mui-bar .mui-btn{height: 50px;top:0;bottom: 0;padding: 8px 20px 12px;border: none; background-color: #338efc;color: white;border-radius: inherit;}
   		/*图片*/
   		.mui-media-body{font-size: 16px;line-height: 30px;}
   		.mui-table-view-cell>a:not(.mui-btn){white-space:normal}
		.mui-table-view .mui-media-object {line-height: 95px;max-width: 95px;height: 95px;}		
	</style>
	<body>
		<!--头部导航-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购物车</h1>
			<a class="mui-icon mui-pull-right edit"><h5>编辑</h5></a>
		</header>	
		<nav class="mui-bar mui-bar-footer">
			<div class="mui-checkbox mui-left all-chose">
				<label>全选</label>
				<input name="checkboxs" value="Item 1" type="checkbox">
			</div>
			<div class="mui-pull-right btn">
				<div class="jiesuan">
					<span>合计：<span class="red" id="total">￥0</span></span>
					<button type="button" class="mui-btn Settlement">结算(0)</button>
				</div>
				<div class="delete">
					<button type="button" class="mui-btn" id="delet">删除</button>
				</div>
			</div>
		</nav> 
		<!--中间导航-->
		<div class="mui-content">	
			<!--<div class="list-p">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" >
						<div class="mui-pull-left wid1">
							<div class="mui-checkbox mui-left">
								<input name="checkbox" value="Item 1" type="checkbox">
							</div>
						</div>
						<div class="mui-pull-left wid2 text" >
							<img class="mui-media-object mui-pull-left" src="../public/img/9.jpg">
							<div class="mui-media-body">
								<div class="mui-ellipsis-2">苹果（Apple）iPhone6  128G   4G 手机 原封 国行</div>								
								<p>
									<span class="mui-h5 red">￥6250.00</span>
									<span class="font10 mui-pull-right back">x1</span>
								</p>
							</div>
							<div class="edit-text mui-text-center">
								<div class="mui-numbox" data-numbox-min='1'>
									<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
									<input class="mui-input-numbox" type="number" />
									<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>-->
		</div>
	</body>
	<script type="text/javascript" src="../libs/mui/mui.js"></script>
	<script type="text/javascript" src="../libs/jquery/jquery.js"></script>	
	<script type="text/javascript" src="../js/function.js"></script>
	<script type="text/javascript" src="../js/open.js"></script>
	<script type="text/javascript" src="../js/web_js/public.js"></script>
	<script type="text/javascript" src="../js/web_js/shopping.js"></script>
	<script>
		$(".all-chose>input[type='checkbox']").on("tap",function(){
			if(!$(this).is(":checked")){
				$("input[name='checkbox']").prop('checked', true);
				var price = shu = 0;
				$('.goodip').each(function(){
		        	var price2 = parseFloat($(this).attr('yuanprice'));
		        	var num =parseFloat($(this).attr('shu')); 
		        	shu = shu + 1;
		        	price+=price2*num;
		        });
		        var money = price.toFixed(2);
		        console.log(money);
		        $('#total').text(money +'元');
		        $('.Settlement').text('结算('+ shu +')');
			}else{
				$("input[name='checkbox']").prop('checked', false);
				 $('#total').text(0 +'元');
				 $('.Settlement').text('结算(0)');
			}
		})
		
//		$("input[name='checkbox']").each(function(){
//			$(this).on('tap',function(){
//				$(".all-chose>input[type='checkbox']").prop('checked',false);
//			})
//		})
		
//			//子复选框的事件  
		$(".goodip").on('click', zixuankuang);
//		
		
		$(".edit").on('tap',function(){
			if($(".edit>h5").html()=="编辑"){
				$(".edit>h5").html("完成")
				$(".text").off( "tap");
				
			}else{
				$(".edit>h5").html("编辑")
				$('.shangping').each(function(){
					var _this = $(this);
				 	var num = _this.find('.mui-input-numbox').val();
				 	_this.find('.back').text("x"+num);
				 	_this.siblings('div').find('input').attr('shu', num);   //兄弟节点下面的input里面的shu赋值
				 	
		        });
		        var shu = 0; 
				var price = 0;
				$("input[type='checkbox'][class='goodip']:checked").each(function(){
					var price2 = parseFloat($(this).attr('yuanprice'));
		        	var num =parseFloat($(this).attr('shu'));
		        	shu = shu + 1;
		        	price+=price2*num;
		
				})		        
				var str = '';
				var money = price.toFixed(2);
		        $('#total').text(money +'元');
		        $('.Settlement').text('结算('+ shu +')');
		         $('.shangping').each(function(){
				 	var num =$(this).find('.mui-input-numbox').val();
				 	var id = $(this).attr('a');
				 	str+=','+id+':'+num;
				 	
		        });
		         
			}
			$(".mui-media-body").toggle()
			$(".edit-text").toggle();
			$(".delete").toggle();
			$(".jiesuan").toggle()
		})
		
	    
		
	</script>
	<script>
		$('.Settlement').on('click',function(){
			var shuju = spid = store_id =  '';
			$("input[type='checkbox'][class='goodip']:checked").each(function(){
	        	spid = $(this).attr('data-gwid')+'|';
	        	shuju += spid + parseFloat($(this).attr('shu'))+',';
	        	store_id += $(this).attr('data-store_id')+',';
			})
//			console.log(shuju);
			if(!shuju){
				toast('您还没有选择要购买的商品');
				return;
			}
			var nwaiting = plus.nativeUI.showWaiting();//显示原生等待框
			var webviewContent= plus.webview.create('./goods.html','goods.html',{},{shuju:shuju,store_id:store_id,ifcart:'1',payment_type:'online'});//后台创建webview并打开show.html
			webviewContent.addEventListener("loaded", function() { //注册新webview的载入完成事件
		        nwaiting.close(); //新webview的载入完毕后关闭等待框
		        webviewContent.show("slide-in-right",20); //把新webview窗体显示出来，显示动画效果为速度200毫秒的右侧移入动画
		        ws.close();
			}, false);
		})
		
		//删除购物车
		$('#delet').on('click',function(){
			var cart_ids = '';
			$("input[type='checkbox'][class='goodip']:checked").each(function(){
	        	cart_ids += $(this).attr('data-gwid')+',';
			})
			if(!cart_ids){
				toast('您还没有选择要删除的商品');
				return;
			}
//			console.log(member_id);return; 
			$.ajax({
				type:"post",
				url:apiRoot + "?act=member_cart&op=cart_del",
				data:{cart_ids:cart_ids,member_id:member_id},
				dataType:'json',
				success:function(data){
					console.log(JSON.stringify(data));
					if(data.code == 200){
						toast('删除成功！');
						ws.reload();
						return;
					}else{
						toast(data.datas.error);
						return;
					}
				},
				error:function(e){
					mui.toast('连接失败！请重新进入！');
					setTimeout(function(){
						$('body div:last').remove();
					},2000);return;
				}
			});
			
			
			
		})	   
	</script>
</html>
